<template>
    <div class="query">
        <div class="query-tools">
            <div class="query-tools-item">
                <el-button link @click="editQueryView" :disabled="selectRowIndex===0">
                    <el-icon size="18" color="#337ecc">
                        <Edit/>
                    </el-icon>
                    <span style="font-size: 14px;">设计查询</span>
                </el-button>
            </div>
            <div class="query-tools-item">
                <el-button link @click="addQueryView">
                    <el-icon size="18" color="#b88230">
                        <CirclePlus/>
                    </el-icon>
                    <span style="font-size: 14px;">新建查询</span>
                </el-button>
            </div>
            <div class="query-tools-item">
                <el-button link @click="deleteQuery" :disabled="selectRowIndex===0">
                    <el-icon size="18" color="#c45656">
                        <Remove/>
                    </el-icon>
                    <span style="font-size: 14px;">删除查询</span>
                </el-button>
            </div>
            <div class="query-tools-item">
                <el-button link @click="showSearchInput" v-if="!searchInput">
                    <el-icon size="18">
                        <Search/>
                    </el-icon>
                </el-button>
                <el-input  v-model="searchContent" style="width: 240px"   size="small" prefix-icon="Search" clearable @change="searchTableName" @clear="clearSearch" v-else />
            </div>
        </div>
        <div class="query-table">
            <el-table :data="tableData" border size="small" height="calc(100vh - 150px)"  @row-click="tableClickRow"  @row-dblclick="tableDbClick" highlight-current-row>
                <el-table-column type="index" width="50" fixed>
                    <template #default="scope">
                        <div style="width: 100%;display: flex;justify-content: flex-start;">
                            <div v-if="selectRowIndex===(scope.$index+1)">
                                <el-icon size="18">
                                    <CaretRight/>
                                </el-icon>
                            </div>
                            <div>{{initIndex(scope.$index)}}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="label" label="名" width="180" fixed/>
                <el-table-column prop="createTime" label="日期" width="180"/>
                <el-table-column prop="size" label="大小" width="120">
                    <template #default="scope">
                        {{getSize(scope.row['value'])}}
                    </template>
                </el-table-column>
                <el-table-column prop="value" label="脚本" show-overflow-tooltip/>
            </el-table>
        </div>
    </div>
</template>

<script setup name="MysqlQueryView">
    const {proxy} = getCurrentInstance();
    const scriptData = reactive({
        tableData: [],
        selectRow: null,
        selectRowIndex: 0,
        connectionInfo: null,
        searchInput:false,
        searchContent:null,
    })
    const {tableData, selectRow, selectRowIndex, connectionInfo,searchInput,searchContent} = toRefs(scriptData);

    function initConnection() {
        if (connectionInfo.value == null) {
            let connect = proxy.$appStore.connectList.find(row => row.id === (proxy.$route.query.connectId * 1));
            connect.database = proxy.$route.query.databaseName
            connectionInfo.value = connect
        }
    }

    function initQueryScriptData() {
        initConnection()
        proxy.$userIpc.invoke(proxy.$ipcRouters.mysqlMng.getQueryScript, connectionInfo.value).then(res => {
          if(res.code===200){
            tableData.value = res.data
          }else {
            proxy.$modal.alertError(res.message);
          }
        })
    }

    function initIndex(index) {
        let rowIndex = index + 1
        return rowIndex;
    }

    function getSize(val) {
        if(val){
            let byteLength = Buffer.from(val).byteLength
            if (byteLength <= 1024) {
                return '1kb'
            } else {
                return (byteLength / 1024).toFixed(2) + 'kb'
            }
        }
        return '0'
    }

    function tableClickRow(row, column, event) {
        selectRowIndex.value = (tableData.value.indexOf(row) + 1)
        selectRow.value = row
    }

    /**
     * 跳转查询视图
     * @param localSelectRow
     */
    function jumpQueryView(localSelectRow) {
        let row = {}
        Object.keys(proxy.$route.query).forEach(key => {
            row[key] = proxy.$route.query[key]
        })
        Object.keys(localSelectRow).forEach(key => {
            row[key] = localSelectRow[key]
        })
        proxy.$router.push({name: 'QueryConsole', query: row})
    }

    function editQueryView() {
        if (!selectRow.value) {
            proxy.$modal.msgError("请选择一条记录")
            return
        }
        jumpQueryView(selectRow.value)
    }

    function addQueryView() {
        proxy.$router.push({name: 'QueryConsole', query: proxy.$route.query})
    }

    function deleteQuery() {
        if (!selectRow.value) {
            proxy.$modal.msgError("请选择一条记录")
            return
        }
        let params = {}
        params.id = selectRow.value.id
        proxy.$userIpc.invoke(proxy.$ipcRouters.mysqlMng.deleteQueryScript, connectionInfo.value, params).then(res => {
            if (res.code === 200) {
                proxy.$modal.msgSuccess("操作成功")
                initQueryScriptData()
            } else {
                proxy.$modal.alertError(res.message)
            }
        })
    }

    function tableDbClick(row, column, event) {
        jumpQueryView(row)
    }


    function showSearchInput(){
        searchInput.value=true
    }

    function searchTableName() {
        if(searchContent.value&&searchContent.value.trim().length>0){
            tableData.value=tableData.value.filter(row=>row.label.includes(searchContent.value));
        }else {
            clearSearch()
            initQueryScriptData()
        }
    }

    function clearSearch() {
        searchInput.value=false;
        searchContent.value=null;
    }


    initQueryScriptData()
</script>

<style scoped>
    .query {
        user-select: text;
    }

    .query-tools {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        height: 32px;
        line-height: 32px;
    }
</style>
